import React from 'react';
import Myinput from '@/components/myinput';
import MyButton from '@/components/mybutton';
import { register, registers } from '@/api';
import {NavLink} from 'react-router-dom';
import './index.scss';

class Com extends React.Component {
  constructor (props) {
    super(props);
    this.state={
        username:'',
        usernameerrortip:'',
        tel:'',
        telerrortip:'',
        password:'',
        passworderrortip:'',
        code:'',
        codeflag: false,
        registerflag: true
    }
  }
  render () {
    return (
      <div className="container">
        <div className="box">
          <header className="header">注册头部</header>
          <div className="content">
            <div className="boox">
                <div className="usernamebox">
                    <Myinput
                    placeholder="请输入用户名"
                    type="username"
                    // label='用户名'
                    value={this.state.username}
                    errortip={this.state.usernameerrortip}
                    onChange={(val) => {
                        if(val.length === '') {
                        this.setState({
                            usernameerrortip: '',
                            username: val
                        })
                        } else if(val.length < 3) {
                        this.setState({
                            usernameerrortip: '长度不能少于3位',
                            username: val
                        })
                        } else {
                        this.setState({
                            usernameerrortip: '用户名正确',
                            username: val
                        })
                        }
                    }}
                    />
                </div>
                <div className="passwordbox">
                    <Myinput
                    placeholder="请输入密码"
                    type="password"
                    // label='密码'
                    value={this.state.password}
                    errortip={this.state.passworderrortip}
                    onChange={ (val) => {
                        let passworderrortip = ''
                        if (val.length === 0) {
                            passworderrortip = ''
                        } else if (val.length < 6) {
                            passworderrortip = '密码格式错误'
                        } else {
                            passworderrortip = '√'
                        }
                        this.setState({
                            passworderrortip,
                            password: val
                        })
                    }}
                    />
                </div>
                <div className="telbox">
                    <Myinput
                    placeholder="请输入手机号"
                    type="tel"
                    // label='手机号'
                    value={this.state.tel}
                    errortip={this.state.telerrortip}
                    onChange={ (val) => {
                        let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
                        if(val.length === 0 ) {
                        this.setState({
                            telerrortip: '',
                            tel: val
                        })
                        } else if (!myreg.test(val)) {
                        this.setState({
                            telerrortip:'手机号码格式错误',
                            tel: val
                        })
                        } else {
                        this.setState({
                            telerrortip: '手机号码正确',
                            tel: val
                        })
                        }
                    }}
                    />
                </div>
                <div className="yz">
                    <Myinput
                    placeholder="请输入验证码"
                    type="code"
                    value={this.state.code}
                    errortip={this.state.codeerrortip}
                    onChange={ (val) => {
                        if(val.length === 0) {
                        this.setState({
                            codeerrortip:'',
                            code: val
                        })
                        } else if (val * 1 !==this.adminCode && val !== '')  {
                        this.setState({
                            codeerrortip:'',
                            code: val
                        })
                        } else {
                        this.setState({
                            codeerrortip:'验证码正确',
                            code: val
                        })
                        }
                    }}
                    />
                    <button
                    className="span"
                    value="点击获取验证码"
                    onClick={ () =>{
                        console.log('点击了')
                        let tel = this.state.tel
                        if ( this.state.telerrortip === '手机号码正确') {
                            this.state.codeflag = true
                            register(tel).then(res => {
                                if (res.data.code === '10000') {
                                  alert('该用户已注册,请直接登录')
                                } else if (res.data.code === '10005') {
                                  alert('发送验证码失败')
                                } else {
                                  this.adminCode = res.data.data
                                  console.log(this.adminCode)
                                    // console.log(121312)
                                  }
                            })
                        }
                    }}
                    disbaled='codeflag'
                    >点击获取验证码</button>
                </div>
                <MyButton
                className="register"
                value="注册"
                disable={ () => {
                    if(this.state.usernameerrortip === '用户名正确' && this.state.passworderrortip === '√' && this.state.telerrortip === '手机号码正确' && this.state.codeerrortip === '验证码正确') {
                        console.log('ok')
                        this.state.registerflag = false
                    } else {
                        console.log('on')
                        this.state.registerflag = true
                    }
                }}
                onClick={ () => {
                    console.log('你点击了注册按钮')
                    registers({username: this.username, password: this.password, tel:this.tel}).then(res => {
                    if (res.data.code === '10000') {
                        console.log('已注册')
                        alert('该用户已注册，请直接登录')
                        this.$router.push('/login')
                        } else if (res.data.code === '10003') {
                        console.log('注册失败')
                        alert('注册失败，请重新注册')
                        } else {
                        this.props.history.goBack(); // 注册成功，返回上一页
                        }                  
                    })
                }}
                />
                <NavLink to="/login">已注册 去登陆</NavLink>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Com;